﻿<!DOCTYPE html>
<html>
<head>
    <title>swiper</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
	<meta charset="utf-8" />
    <link href="css/base.2.1.0.css" rel="stylesheet" />
    <script src="js/jquery-3.1.0.min.js"></script>
    <style type="text/css">
        .ab { width: 1px; height: 1px; background: #0094ff; position: absolute; }
        .move { position: absolute; width: 10px; height: 10px; background: #ff0000;border-radius:50%;z-index:1; }  


        .wraper { width:758px;margin:10% auto 0;position:relative }


        .img-360 { position: relative; width: 750px; height: 500px; overflow: hidden; }
        .img-360 .img-cover { position:absolute;top:0;left:0;width:100%;height:100%; }
        .img-360 .img-item { opacity: 0; transition: opacity ease-in-out .3s; width: 100%;position:absolute;top:0;left:0; /*display: none;*/ }
        .img-360 .img-item.active { opacity: 1;display:block }
        .i-slider { width: 758px; height: 120px; margin-top: -120px; position: relative; border-top: solid 1px transparent; border-right: solid 2px #e3e6ef; border-bottom: solid 2px #d2d7e5; border-left: solid 2px #e3e6ef; border-radius: 100%; }
        /*.i-slider { outline: solid 1px #ddd; border-top: solid 2px #e3e6ef; }*/
        .i-slider .i-slider-drag { position:absolute;left:-23px;bottom:-23px;top:37px; }
        .i-slider .i-slider-drag .i-drag { background: url(images/icon-slider.png) no-repeat 50% 50%;width:46px;height:46px; }
    </style>
</head>
<body>
    <div class="wraper" id="hudu"style="height:120px;">
        <div class="move"></div>
        <div class="text-center" id="xy"></div>
    </div>

    <div class="container">
        <div class="wraper" style="padding-bottom:120px;">
            <div class="img-360">
                <div class="img-cover"></div>
                <img class="img-item active" src="http://oss.cubiauto.com/1501014480786849.jpg?imageMogr2/thumbnail/750x500!" />
                <img class="img-item" src="http://oss.cubiauto.com/1501014480821077.jpg?imageMogr2/thumbnail/750x500!" />
                <img class="img-item" src="http://oss.cubiauto.com/1501014480858915.jpg?imageMogr2/thumbnail/750x500!" />
                <img class="img-item" src="http://oss.cubiauto.com/1501014480891772.jpg?imageMogr2/thumbnail/750x500!" />
                <img class="img-item" src="http://oss.cubiauto.com/1501014480924319.jpg?imageMogr2/thumbnail/750x500!" />
                <img class="img-item" src="http://oss.cubiauto.com/1501014481000815.jpg?imageMogr2/thumbnail/750x500!" />
                <img class="img-item" src="http://oss.cubiauto.com/1501014480957118.jpg?imageMogr2/thumbnail/750x500!" />
                <img class="img-item" src="http://oss.cubiauto.com/1501014481030583.jpg?imageMogr2/thumbnail/750x500!" />
            </div>
            <div class="i-slider">
                <div class="i-slider-drag">
                    <div class="i-drag"></div>
                </div>
            </div>
        </div>
    </div>
    <script type="text/javascript">
        var max = $('.i-slider').width(), w = $(".i-slider-drag").width();
        $(".i-slider-drag").on('mousedown', function (e) {
            $(this).attr('drag', true);

        }).on('mouseup', function (e) {
            $(this).attr('drag', false);

        }).on('mousemove', function (e) {
            
        })

        !(function () {
            var params = {
                left: 0,
                top: 0,
                currentX: 0,
                currentY: 0,
                flag: false
            };
            //拖拽的实现
            window.drag = function (bar, target, callback) {
                var selfw = $(target).width(), selfh = $(target).height(), maxwidth = $('.i-slider').width();
                var m = maxwidth / 2 - selfw / 2;
                if ($(target).css('left') !== "auto") {
                    params.left = $(target).css('left');
                }
                if ($(target).css('top') !== "auto") {
                    params.top = $(target).css('top');
                }
                //o是移动对象
                bar.onmousedown = function (event) {
                    params.flag = true;
                    if (!event) {
                        event = window.event;
                        //防止IE文字选中
                        bar.onselectstart = function () {
                            return false;
                        }
                    }
                    var e = event;
                    params.currentX = e.clientX;
                    params.currentY = e.clientY;
                };
                document.onmouseup = function () {
                    params.flag = false;
                    if ($(target).css('left') !== "auto") {
                        params.left = $(target).css('left');
                    }
                    if ($(target).css('top') !== "auto") {
                        params.top = $(target).css('top');
                    }
                };
                document.onmousemove = function (event) {
                    var e = event ? event : window.event;
                    if (params.flag) {
                        var nowX = e.clientX, nowY = e.clientY;
                        var disX = nowX - params.currentX, disY = nowY - params.currentY;
                        var x = parseInt(params.left) + disX, y = parseInt(params.top) ;

                        var c = (selfw / 2);
                        
                        x = x < -c ? -c : x;
                        x = x > maxwidth - c ? maxwidth - c : x;

                        var m = maxwidth / 2;
                        if ((x + c) < m) {
                            //y = (m - (x + c)) * Math.tan(9.567);
                            var radina = Math.atan(60 / Math.abs((x + c)));
                            var angle = (180 / (Math.PI / radina));
                            //第三象限 修正角度
                            var _angle = 180 - angle;
                            //y值
                            y = 0 - (60 * Math.cos((Math.PI / 180) * _angle));
                            console.log(radina.toFixed(2), angle.toFixed(2), _angle.toFixed(2), Math.abs((x + c)), y.toFixed(2));
                            //弧度 = π/180×角度
                            //角度 = 180/π×弧度
                            //var hd = Math.PI / 180 * 30;
                            //var jd = 180 / Math.PI * hd;
                            //y = 0;
                        } else if ((x + c) == m) {
                            y = 0;
                        } else {

                            var radina = Math.atan(Math.abs((x + c) - 2*m) / 60);
                            var angle = (180 / (Math.PI / radina));
                            //第三象限 修正角度
                            var _angle = (270 - angle);
                            //y值
                            y = 0 - (60 * Math.cos((Math.PI / 180) * _angle));
                            console.log(radina.toFixed(2), angle.toFixed(2), _angle.toFixed(2), Math.abs((x + c) - 2*m), y.toFixed(2), x);

                            //y = 0;
                        }

                        y = y + 60 - 23;
                        //console.log(y);
                        target.style.left = x + "px";
                        target.style.top = y + "px";
                        //target.style.top = parseInt(params.top) + disY + "px";
                        if (event.preventDefault) {
                            event.preventDefault();
                        }
                        if (typeof callback == "function") {
                            callback(x, parseInt(params.top) + disY);
                        }
                        return false;                        
                    }
                    return false;
                }
            };
        })();

        drag($('.i-slider-drag')[0], $('.i-slider-drag')[0], function (x, y) {
            var imgs = $(".img-360 .img-item"),
                len = imgs.length,
                max = $('.i-slider').width(),
                selfw = $('.i-slider-drag').width();
            x = x + (selfw / 2);
            var c = Math.floor(x / (max / len));
            //console.log(c, x);
            var idx = c == len ? c - 1 : c;
            imgs.removeClass('active').eq(idx).addClass('active');
        });

        //弧度
        //var x = 379, y = 0, a = 379, b = 60, du = 360, z = 0, arr = [], timer;
        //(function () {
        //    var go = document.querySelector(".move");
        //    for (var i = 0; i < du; i++) {
        //        var divs = document.createElement("div"),
        //            hudu = (Math.PI / 180) * i,
        //            x1 = a * Math.sin(hudu) + x,
        //            y1 = y - (b * Math.cos(hudu));
        //        arr[i] = [];
        //        arr[i][0] = x1;
        //        arr[i][1] = y1;
        //        //arr[i][3] = hudu;
        //        //arr[i][4] = Math.cos(hudu);
        //        var div = "<div style='left:" + x1 + "px;top:" + y1 + "px;' class='ab' data='" + hudu.toFixed(2) + " - " + Math.cos(hudu).toFixed(2) + " - " + i + "'></div>";
        //        //document.body.appendChild(divs);
        //        $("#hudu").append(div);
        //    };
        //    clearInterval(timer);
        //    timer = setInterval(function () {
        //        if (z >= du) z = 0;
        //        go.style.cssText = "left:" + (arr[z][0] - 5) + "px;top:" + (arr[z][1] - 5) + "px;";
        //        $('#xy').text("x：" + (arr[z][0] - 5) + " - y：" + (arr[z][1] - 5));
        //        z++;
        //    }, 1000)
        //})()  
    </script>
</body>
</html>